<template>
    <div class="ope">
        <div class="ope-box">
            <el-button type="primary" size="small" @click="addData" v-if="ifAdd">添加数据</el-button>
            <el-button type="danger" size="small" @click="delAll" v-if="ifDel">全部删除</el-button>
            <el-button type="warning" size="small" @click="chooseMore" v-if="ifDelMore">{{ chooseText }}</el-button>
            <el-button type="info" size="small" @click="delChoose" v-if="ifDelChoose">删除选中</el-button>
            <el-button type="success" size="small" @click="fresh" v-if="ifNew" icon="el-icon-refresh">刷新</el-button>
        </div>
        <div class="search" v-if="ifSearch">
            <el-select v-model="searchKind" placeholder="选择关键字">
                <el-option
                    label="全部"
                    value=""
                ></el-option>
                <el-option
                    v-for="(item, index) in allSearchKind"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <el-input :style="{width: '4rem', marginLeft: '.5rem'}" v-model="searchKeyWord" placeholder="输入">
                <div slot="suffix" class="icon-box"  @click="toSearch">
                    <i class="el-icon-search"></i>
                </div>
            </el-input>
        </div>
       
    </div>
</template>

<script>
export default {
    props: {
        addFun: String, 
        delFun: String,
        newFun: String,
        delMoreFun: String,
        delChooseFun: String,
        searchFun: String,
        ifNew: Boolean,
        ifAdd: Boolean,
        ifDel: Boolean,
        ifDelChoose: Boolean,
        ifDelMore: Boolean,
        ifSearch: Boolean,
        allSearchKind: Array
        
    },
    name: 'Ope',
    data () {
        return {
            searchKind: '',
            chooseText: '多选删除',
            searchKeyWord: ''
        }
    },
    methods: {
        toSearch () {
            var searchInput = {
                searchKind: this.searchKind,
                searchKeyWord: this.searchKeyWord
            };
            this.$emit(this.searchFun, searchInput);
        },
        delChoose () {
            this.$emit(this.delChooseFun)
        },
        chooseMore () {
            var param = this.chooseText;
            this.chooseText = param === '多选删除' ? '取消多选' : '多选删除';
            this.$emit(this.delMoreFun, param);
        },
        fresh () {
            this.$emit(this.newFun)
        },
        addData() {
            this.$emit(this.addFun)
        },
        delAll() {
            this.$emit(this.delFun)
        }
    },
    computed: {
        
    }
}
</script>

<style lang="stylus" scoped>

    .ope
        width 100%
        height 1rem
        display flex
        align-items center
        justify-content space-between
        .ope-box
            display flex
            height 100%
            align-items center
        el-button
            margin-right 20px
        .search
            height 100%
            width 50%
            display flex
            align-items center
            justify-content flex-end
            .icon-box 
                width .7rem
                height 100%
                display flex
                align-items center
                justify-content center
                cursor pointer
                border-left 1px solid #C0C4CC
        
</style>

